<template>
  <el-card class="box-card" style="height: 400px;width: 300px;">
    <div class="clearfix">
      <span style="float: left">{{ this.info.name }} 老师</span>
      <el-button style="float: right; padding: 3px 0" type="text">选择</el-button>
    </div>
    <el-divider></el-divider>
    <div>
      <el-avatar style="float: left" shape="square" :size="130" :fit="this.imgFit" :src="this.imgURL"></el-avatar>
    </div>
    <div style="position: relative;left: 0;top: 20px">
      性别：{{ this.info.sex }}
    </div>
    <div style="position: relative;left: 0;top: 40px">
      手机号：{{ this.info.lxfs }}
    </div>
    <div style="position: relative;left: -150px;top: 100px">
      个人简介：
    </div>
    <div style="position: relative;left: 0;top: 40px;
                width: 260px;
                height: 120px;
                margin: 0 auto">
      <el-input type="textarea"
                :autosize="{ minRows: 5, maxRows: 6}"
                :placeholder="this.info.jsbz" disabled>
      </el-input>
    </div>
  </el-card>
</template>
<script>
export default {
  name: 'ShowTeacherInfo',
  props: ['info'],
  data () {
    return {
      imgURL: '',
      imgFit: 'fill'
    }
  },
  created () {
    if (this.info.img === ' ') {
      this.imgURL = 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png'
    } else {
      this.imgURL = this.info.img
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 500px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}
</style>
